import { View } from '@tarojs/components';
import s from './index.module.scss'
import Switch from 'components/Switch';
import ScrollBar from 'components/ScrollBar'
import Icon from 'components/Icon'
import { useState } from 'react';
import classNames from 'classnames';

export default function Grid() {
  const [active, setActive] = useState(false)
  const [column, setColumn] = useState(1)
  const [row, setRow] = useState(1)
  
  const lineNum = [1, 2, 3, 4, 5]
  const _target = classNames(s.target, {
    [s.active]: active
  })

  function onChangeColumn(number: number) {
    setColumn(number)
  }
  function onChangeRow(number: number) {
    setRow(number)
  }
  return(
    <View className={s.wrapper}>
      <View className={s.container}>
        <ScrollBar title='grid-column 1 / ' minNum={1} maxNum={5} onChange={onChangeColumn} text_color={'#fff'} />
        <ScrollBar title='grid-row 1 / ' minNum={1} maxNum={5} onChange={onChangeRow} text_color={'#fff'} />
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>

          <View id={s.over} className={_target}>
            <View
              className={s.box_out}
              style={{
                gridColumn: `1 / ${column}`,
                gridRow: `1 / ${row}`
              }}
              >
              <View className={s.width}>
                <Icon name='chevron-down' size={30} style={{transform: 'rotate(90deg)', marginLeft: '-16px'}}/>
                <View id={s.line_left} className={s.width_line}></View>
                <View className={s.width_text}>{`1 to ${column}`}</View>
                <View id={s.line_right} className={s.width_line}></View>
                <Icon name='chevron-up' size={30} style={{ transform: 'rotate(90deg)', marginRight: '-16px'}}/>
              </View>
              <View className={s.height}>
                <Icon name='chevron-up' size={30} style={{ marginTop: '-16px' }} />
                <View id={s.line_top} className={s.height_line}></View>
                <View className={s.height_text}>1 to {row}</View>
                <View id={s.line_bottom} className={s.height_line}></View>
                <Icon name='chevron-down' size={30} style={{ marginBottom: '-16px' }} />
              </View>
              <View className={s.box_inner}></View>
            </View>
          </View>

          <View id={s.under} className={_target}>
            <View className={s.column}>
              {lineNum.map((item) => (
                <View className={s.column_line}>
                  <View className={s.column_num}>{item}</View>
                </View>
              ))}
              
            </View>
            <View className={s.row}>
              {lineNum.map((item) => (
                <View className={s.row_line}>
                  <View className={s.row_num}>{item}</View>
                </View>
              ))}
            </View>
          </View>
            
        </View>
        <Switch text='展示' state={active} onClick={() =>  setActive(!active)} />
      </View>
    </View>
  )
}